<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九宫格布局</title>
    <link rel="stylesheet" href="./reset.css">
    <style media="screen">
    body{
      padding: 50px;
    }
    /*1.table布局*/
    /*2.flex布局*/
      /*.container{
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        padding-top: 4px;
      }
      .ceil{
        box-sizing: border-box;
        border: 4px solid #ccc;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        vertical-align: middle;
        margin-left: -4px;
        margin-top: -4px;
      }
      .ceil:nth-child(3n+1){
        margin-left: 0;
      }
      .ceil:hover{
        border-color: red;
        z-index: 2
      }*/
    /*3.gird布局*/
    .container{
      display: grid;
      width: 300px;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      padding-top: 4px;
    }
    .ceil{
      box-sizing: border-box;
      border: 4px solid #eee;
      text-align: center;
      line-height: 100px;
      margin-left: -4px;
      margin-top: -4px;
    }
    .ceil:nth-child(3n+1){
      margin-left: 0;
    }
    .ceil:hover{
      border-color: red;
      z-index: 2;
    }
    </style>
  </head>
  <body>
    <ul class="container">
      <li class="ceil">1</li>
      <li class="ceil">2</li>
      <li class="ceil">3</li>
      <li class="ceil">4</li>
      <li class="ceil">5</li>
      <li class="ceil">6</li>
      <li class="ceil">7</li>
      <li class="ceil">8</li>
      <li class="ceil">9</li>
    </ul>
    <button id="btn">按钮</button>
  </body>
  <script>
    var $btn = document.getElementById('btn');
    $btn.onclick = function(){
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth()+1;
      var d = date.getDate();
      if()
      console.log(y,m,d)
      console.log(date)
      console.log($btn)
    }
  </script>
</html>
